﻿
@{
    ViewData["Title"] = "NewsDetail";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}

<div class="white-section section-block" id="detail">
    <div class="container">
        <div class="section-space"></div>
        <div class="row">
            <div class="col-lg-8 blog-single">
                <article class="post-entry">
                    <div class="post-image wow fadeIn animated" style="display:none;">
                        <a href="#">
                            <img width="600" height="430" :src="item.ThumbImage" alt="">
                            <span class="filter-grayscale"></span>
                        </a>
                    </div>
                    <div class="post-content">
                        <h4 class="post-title">{{item.NewsTitle}}</h4>
                        <ul class="post-tags">
                            <li>{{item.BaseModifyTime}}</li>


                        </ul>
                        <hr />
                        <div class="description" style="background:#fff;">
                            <p v-html="item.NewsContent"></p>
                        </div>

                    </div>
                </article>

                <div class="comments-area">
                    <div class="group-title"><h4>网友评论</h4></div>
                    <div class="inner-box">
                        <!--Comment Box-->
                        <div class="comment-box" v-for="comm in dataList">
                            <div class="comment">
                                <div class="author-thumb"><img src="~/assets/img/author.jpg" alt=""></div>
                                <div class="comment-inner">
                                    <div class="comment-info clearfix"><strong>{{comm.PlName}}</strong></div>
                                    <div class="text">{{comm.PlContent}}</div>
                                    <ul class="post-info">
                                        <li>{{comm.PlDate}}</li>

                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="pagination">
                                <ul>
                                    <li v-if="pageIndex>1"><a v-on:click="pageIndex--,pageClick()">上一页</a></li>
                                    <li v-if="pageIndex==1"><a class="banclick">上一页</a></li>
                                    <li v-for="index in indexPage" v-bind:class="{ 'active': pageIndex == index}">
                                        <a v-on:click="btnClick(index)">{{index}}</a>
                                    </li>

                                    <li v-if="pageIndex!=all"><a v-on:click="pageIndex++,pageClick()">下一页</a></li>
                                    <li v-if="pageIndex == all"><a class="banclick">下一页</a></li>
                                </ul>
                            </div>
                            <!--分页-->

                        </div>
                    </div>
                </div>

                <div class="comment-form">
                    <div class="group-title"><h4>发表评论</h4></div>
                    <div class="form-inner">
                        <!--Comment Form-->

                        <div class="row clearfix">
                            <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                                <input type="text" v-model="AddForm.PlName" placeholder="姓名/称呼" required="">
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                                <input type="text" v-model="AddForm.PlHone" placeholder="联系方式" required="">
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-12 form-group" style="display:none;">
                                <input type="text" v-model="AddForm.PlAddress" placeholder="" required="">
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <textarea name="message" v-model="AddForm.PlContent" placeholder="评论内容"></textarea>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group " style=" color:red;">
                                （评论提交后，等待管理员审核通过后即可呈现！）
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <button class="theme-btn btn-style-two" @@click="onSubmit()">立即提交</button>
                            </div>

                        </div>

                    </div>
                </div>



            </div>
            <div class="col-lg-4 sidebar-blog">
                <div class="widget">
                    <h4 class="widget-title">最新动态</h4>
                    <div class="sidebar-recent-post">
                        <ul>
                            <li  v-for="item in newsList.slice(0,5)">
                                <div class="recent-post-thumb">
                                    <a :href="newsUrl+item.Id">
                                        <img :src="item.ThumbImage"/>
                                    </a>
                                </div>
                                <div class="recent-post-content">
                                    <h4>
                                        <a :href="newsUrl+item.Id">{{item.NewsTitle}}</a>
                                    </h4>
                                    <div class="widget-date">{{item.BaseModifyTime}}</div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>


            </div>
        </div>
        <div class="section-space"></div>
    </div>
</div>
<!-- cta bar -->

<script type="text/javascript">
        var vm = new Vue({
            el: "#detail",           
            data: {
                newsUrl: 'News/NewsDetail?id=',
                id: 0,
                item: {},
                newsList: [],//新闻
                AddForm: {
                    PlId: 0,
                    PlName: "",
                    PlHone: "",
                    PlSort: 0,
                    PlUid:1,//0是产品，1是新闻
                    PlAddress: '',
                    PlContent: "",
                    PlDate: '',
                },
                dataList: [],
                all: 0,//总页数
                pageIndex: 1, //当前页
                pageSize: 10, //每页条数
                indexPage: []
            },
            mounted() {
                this.getReq();//渲染之前
                this.getDetail();//获取数据
                this.getNewsList();
                this.getList(1);
            },
            methods: {
                //获取News内容单条
                getDetail(pageIndex) {
                    var that = this
                    $.ajax({
                        type: 'GET',
                        url: '/api/News/GetFormJson?id=' + this.id,
                        data: {},
                        success: function (res) {
                            that.item = res.Result,   
                            that.AddForm.PlAddress = res.Result.NewsTitle;
                            vm.$forceUpdate();                           
                        }
                    });
                },
                getNewsList() {
                    var that = this
                    $.ajax({
                        type: 'GET',
                        url: '/api/News/GetListJson',
                        data: {},
                        success: function (res) {
                           // console.log(res.Result)
                            for (var i = 0; i < res.Result.length; i++) {
                                if (res.Result[i].NewsType == 1 || res.Result[i].NewsType == 2) {
                                    that.newsList.push(res.Result[i])
                                }
                            }
                            //that.newsList = res.Result
                            vm.$forceUpdate();
                            //console.log(that.newsList)
                        }
                    });
                   
                },

                //获取评论
                getList(pageIndex) {
                    var that = this
                    $.ajax({
                        type: 'GET',
                        url: '/api/Comment/GetPageListJson?pageSize=' + this.pageSize + '&pageIndex=' + pageIndex + '&PlId=' + this.id + '&PlSort=1&PlUid=1',
                        data: {},
                        success: function (res) {
                            that.dataList = res.Result,
                                that.all = res.TotalCount,
                                vm.$forceUpdate();
                            that.indexs();//分页
                        }
                    });
                },
                //分页
                indexs() {
                    var left = 1;
                    var indexall = parseInt(this.all / this.pageSize);

                    var arr = [];
                    if (indexall == 0) {
                        arr.push(1);
                    } else {
                        for (let i = 1; i <= indexall; i++) {
                            arr.push(i);

                        }
                    }
                    this.indexPage = arr;
                    console.log(arr)

                },
                //分页
                btnClick: function (data) {//页码点击事件
                    if (data != this.pageIndex) {
                        this.pageIndex = data
                    }
                    //根据点击页数请求数据
                    this.getList(this.pageIndex);
                },
                pageClick: function () {
                    //根据点击页数请求数据
                    this.getList(this.pageIndex);
                },
                //获取url参数
                getReq() {
                    var Requset = new Object;
                    Requset = GetRequest();
                    this.id = Requset["id"]
                    this.AddForm.PlId = Requset["id"]
                    this.getTime();
                },
                //提交评论
                onSubmit() {

                    //document.getElementById("loadingDiv").style.display = "block";//loading取消

                    var that = this

                    console.log(this.AddForm)
                    $.ajax({
                        type: 'POST',
                        url: '/api/Comment/SaveFormJson',
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        data: this.AddForm,
                        success: function (res) {
                            alert("提交成功！等待管理员审核即可显示！")
                            window.location.reload();
                           // console.log(res)
                            //setTimeout(function () {
                            //    document.getElementById("loadingDiv").style.display = "none";//loading取消
                            //    window.location.reload();
                            //}, 500)

                        }
                    });

                },
                //获取时间
                getTime() {
                    var _this = this;
                    let yy = new Date().getFullYear();
                    let mm = new Date().getMonth() + 1;
                    let dd = new Date().getDate();
                    let hh = new Date().getHours();
                    let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                    let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                    _this.AddForm.PlDate = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf;
                },
                
            },
            created() {

            },
        })
</script>

